<template>
  <div>
    <div class="title">
      <el-select style="width:200px;" v-model="dataStatus" placeholder="是否生效">
        <el-option label="正常" :value="0"></el-option>
        <el-option label="禁用" :value="1"></el-option>
      </el-select>
      <el-select style="width:200px;margin-left:20px;" v-model="showStatus" placeholder="是否显示">
        <el-option label="不显示" :value="0"></el-option>
        <el-option label="显示" :value="1"></el-option>
      </el-select>
      <el-button @click="getDataList" type="primary" style="margin-left:20px;">搜索</el-button>
      <el-button @click="addHandler" type="primary" style="margin-left:20px;">新增</el-button>
    </div>
    <div class="data">
      <el-table v-loading="loading" :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="站点id" align="center" min-width="50"></el-table-column>

        <el-table-column prop="plotCode" label="站点编号" align="center" min-width="70"></el-table-column>
        <el-table-column prop="plotName" label="站点名称" align="center" min-width="70"></el-table-column>
        <el-table-column prop="regionCode" label="所属地区代码 " align="center" min-width="50"></el-table-column>
        <el-table-column prop="address" label="地址 " align="center" min-width="50"></el-table-column>

        <el-table-column prop="regionName" label="所属地区名称 " align="center" min-width="50"></el-table-column>
        <el-table-column prop="userId" label="代理商id " align="center" min-width="40"></el-table-column>
        <el-table-column prop="userName" label="代理商 " align="center" min-width="50"></el-table-column>
        <el-table-column prop="lng" label="纬度 " align="center" min-width="100"></el-table-column>
        <el-table-column prop="lat" label="经度 " align="center" min-width="100"></el-table-column>

        <el-table-column prop="createTime" label="创建时间 " align="center" min-width="100"></el-table-column>
        <el-table-column label="操作" align="center" min-width="100">
          <template slot-scope="scope">
            <el-link @click="editCardHandler(scope.row)" >编辑</el-link>
            <!-- <el-link @click="editmenuHandler(scope.row)">配置岗位</el-link> -->
            <!-- <i style="cursor: pointer;" @click="deteteHandlet(scope.row)" class="el-icon-delete"></i> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-size="pageSize"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog title="新增" :visible.sync="dialogVisible" width="40%">
      <el-form ref="form" :model="formData" label-width="100px" :rules="formRule">
        <el-form-item class="nav-form-item" label="促销名称 " prop="name">
          <el-input maxlength="15" v-model="formData.name" style="width:300px;" placeholder="请输入促销名称" clearable />
        </el-form-item>
        <el-form-item class="nav-form-item" label="赠送金额" prop="name">
          <el-input
            type="number"
            maxlength="5"
            v-model="formData.giftAmount"
            style="width:300px;"
            placeholder="请输入赠送金额"
          />
        </el-form-item>
        <el-form-item class="nav-form-item" label="满足金额" prop="name">
          <el-input
            type="number"
            maxlength="5"
            v-model="formData.totalAmount"
            style="width:300px;"
            placeholder="请输入满足金额"
          />
        </el-form-item>
        <el-form-item class="nav-form-item" label="数据状态" prop="name">
          <el-select v-model="formData.dataStatus" placeholder="请选择"  style="width:300px">
            <el-option label="正常" value="0"></el-option>
            <el-option label="禁用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="nav-form-item" label="是否显示" prop="name">
          <el-select style="width:300px" v-model="formData.showStatus" placeholder="请选择">
            <el-option label="不显示" value="0"></el-option>
            <el-option label="显示" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button :disabled="isDisable" type="primary" @click="confimHandler">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getPlotList, getSumFinace } from '@/api/plot'
import { getToken } from '@/utils/auth'
export default {
  data() {
    return {
      isDisable: false,
      dataStatus: null,
      showStatus: null,
      dialogVisible: false,
      operatorId: '',
      date: '',
      id: '',
      isAdd: true,
      search: '',
      tableData: [],
      page: 1,
      pageSize: 10,
      loading: true,
      formData: {
        dataStatus: 0,
        giftAmount: null,
        name: '',
        showStatus: 0,
        totalAmount: null
      },
      total: 0,

      options: [],
      formRule: {
        name: [{ required: true, message: '请输入必填项', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    showStatusFormatter(row) {
      if (row.showStatus == 0) {
        return '不显示'
      } else if (row.showStatus == 1) {
        return '显示'
      }
    },
    dataStatusFormatter(row) {
      if (row.dataStatus == 0) {
        return '正常'
      } else if (row.dataStatus == 1) {
        return '禁用'
      } else if (row.dataStatus == 2) {
        return '删除'
      }
    },
    getDataList() {
      this.loading = true
      let param = {
        dataStatus: this.dataStatus,
        showStatus: this.showStatus,
        pageNo: this.page,
        pageSize: this.pageSize
      }
      getPromotionList(param).then(res => {
        if (res.data && res.data.records.length > 0) {
          this.tableData = [...res.data.records]
          this.total = res.data.total
        }

        this.loading = false
      })
    },
    handleCurrentChange(val) {
      this.page = val
      this.getDataList()
    },
    addHandler() {
      this.isAdd = true
      this.formData.dataStatus = '0'
      this.formData.giftAmount = null
      this.formData.name = ''
      this.formData.showStatus = '0'
      this.formData.totalAmount = null
      this.dialogVisible = true
    },
    confimHandler() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.isAdd) {
            this.addCard()
          } else {
            this.editCard()
          }
        }
      })
    },
    deleteHandler(row) {
      this.$confirm('确定删除所选项吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param = {
          id: row.id
        }
        delPromotion(param).then(res => {
          if (res.message.code == 0) {
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.getDataList()
          } else {
            this.$message.error(res.data)
          }
        })
      })
    },
    editCardHandler(row) {
      this.isAdd = false
      this.formData.id = row.id
      this.formData.dataStatus = row.dataStatus
      this.formData.giftAmount = row.giftAmount
      this.formData.name = row.name
      this.formData.showStatus = row.showStatus
      this.formData.totalAmount = row.totalAmount
      this.dialogVisible = true
    },
    editCard() {
      this.isDisable = true
      updatePromotion(this.formData).then(res => {
        if (res.message.code == 0) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.isDisable = false
          this.dialogVisible = false
          this.getDataList()
        } else {
          this.$message.error(res.data)
        }
      })
    },
    addCard() {
      this.isDisable = true
      addPromotion(this.formData).then(res => {
        if (res.message.code == -1) {
          this.$message.error(res.data)
        } else {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.isDisable = false
          this.dialogVisible = false
          this.getDataList()
        }
      })
    },
    getUseRecodsHandler(row) {
      this.$router.push({
        path: 'card/useRecods',
        query: {
          cardNo: row.cardNo
        }
      })
    }
  }
}
</script>
<style scoped>
.title {
  margin-left: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
}

.data {
  margin-left: 20px;
  margin-top: 20px;
  margin-right: 10px;
}
</style>
